<template>
  <div class="orderdetail-page">
    <div class="orderdetail-contain">
      <div class="orderdetail-top">
        <van-nav-bar title="订单详情" right-text="" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="orderdetail-content" ref="orderdetail_page">
        <div class="order-detail">
          <div class="order-status-box">
            <div class="img-box">
              <img :src="orderStatus[orderDetailInfo.stats]" alt="">
            </div>
            <p class="stats-txt">
              <span v-if="orderDetailInfo.stats === 0">待付款</span>
              <span v-else-if="orderDetailInfo.stats === 1">进行中</span>
              <span v-else-if="orderDetailInfo.stats === 2">配送中</span>
              <span v-else-if="orderDetailInfo.stats === 3">已签收</span>
            </p>
          </div>
          <div class="order-addresss-box" v-if="orderDetailInfo.relation_order_address">
            <div class="address-content">
              <p class="addres-id addres-info">
                <span class="addres-info">{{orderDetailInfo.relation_order_address.area}}{{orderDetailInfo.relation_order_address.address}}</span>
              </p>
              <h2 class="address-name">
                <span>{{orderDetailInfo.relation_order_address.name}}</span>
                <span class="iphone">{{orderDetailInfo.relation_order_address.mobile}}</span>
              </h2>
              <span class="address-tag">[地址]</span>
            </div>
          </div>
          <div class="orderdetail-check" v-if="orderDetailInfo.relation_order_product">
            <div class="order-check-wrap" @click="showAllProduct()">
              <div class="order-check-l">查看商品详情</div>
              <div class="order-check-r">{{orderDetailInfo.relation_order_product.length}}件
                <span :class="{'mf-chevron-down':isShowList,'mf-chevron-up':!isShowList}" class="mf-chevron-down"></span>
              </div>
            </div>
            <ul class="order-list-wrap" v-show="isShowList">
              <li v-for="item in orderDetailInfo.relation_order_product" @click="goProductDetail(item.product_id)" class="">
                <div class="order-list-l">
                  <img :src="'http://www.yhsh.com/'+item.product_thumb">
                  <div class="order-list-name">
                    {{item.product_title}}
                  </div>
                </div>
                <div class="order-list-r">
                  <div class="order-list-price">
                    <span style="color: rgb(255, 72, 145);">¥{{item.product_price}}</span>
                  </div>
                  <div class="order-list-count">x{{item.quantity}}</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="message-details order-information" v-if="orderDetailInfo.stats!=='0'">
            <p class="fot-num" v-if="orderDetailInfo.order_sn">
              <span class="order-information-title">订单编号: </span>
              <span class="order-information-color">{{orderDetailInfo.order_sn}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.trade_no">
              <span class="order-information-title">交易流水:</span>
              <span class="order-information-color">{{orderDetailInfo.trade_no}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.create_time">
              <span class="order-information-title">创建时间: </span>
              <span class="order-information-color">{{orderDetailInfo.create_time}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.pay_time">
              <span class="order-information-title">付款时间: </span>
              <span class="order-information-color">{{orderDetailInfo.pay_time}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.shipped_time">
              <span class="order-information-title">发货时间: </span>
              <span class="order-information-color">{{orderDetailInfo.shipped_time}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.shipped_num">
              <span class="order-information-title">快递单号:</span>
              <span class="order-information-color">{{orderDetailInfo.shipped_num}}</span>
            </p>
            <p class="fot-num" v-if="orderDetailInfo.finished_time">
              <span class="order-information-title">成交时间: </span>
              <span class="order-information-color">{{orderDetailInfo.finished_time}}</span>
            </p>
          </div>
          <div class="price-list-panel">
            <div class="list item-have-arrow item-board">
              <div class="list-totalPrice">
                <span class="item-content item-content-totalPrice">商品总价</span>
                <div class="item-price item-price-totalPrice" style="color: rgb(38, 38, 38);">
                  <div class="item-price-total">￥{{orderDetailInfo.total_fee}}</div>
                </div>
              </div>
            </div>
            <div class="list item-have-arrow item-board">
              <div class="list-totalPrice">
                <span class="item-content">运费</span>
                <span class="item-price" style="color: rgb(38, 38, 38);">
                  <span class="rmb" v-show="orderDetailInfo.total_fee<38">￥10</span>
                  <span v-show="orderDetailInfo.total_fee>=38">免邮</span>
                </span>
              </div>
            </div>
            <div class="info-details">
              <span class="item-totalPrice-title" style="color: rgb(38, 38, 38);">合计</span>
              <span style="color: rgb(255, 72, 145);" v-show="orderDetailInfo.total_fee<38">¥{{orderDetailInfo.total_fee+10}}</span>
              <span style="color: rgb(255, 72, 145);" v-show="orderDetailInfo.total_fee>=38">¥{{orderDetailInfo.total_fee}}</span>
            </div>
          </div>
          <div class="transparent-bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Vue from 'vue'
import {CODE, APIURI} from '#/common/js/apiConst'
import { NavBar, Icon } from 'vant'
Vue.use(NavBar).use(Icon)

// eslint-disable-next-line
//0已提交 //1已支付 //2进行中 //3已签收 //拒绝订单 //取消订单
export default {
  data() {
    return {
      id: '',
      orderStatus: [
        'https://static-as.missfresh.cn/frontend/img/order-PENDING.png',
        'https://static-as.missfresh.cn/frontend/img/order-PAID.png',
        'https://static-as.missfresh.cn/frontend/img/order-SHIPPED.png',
        'https://static-as.missfresh.cn/frontend/img/order-FINISHED.png',
        'https://static-as.missfresh.cn/frontend/img/order-DECLINED.png',
        'https://static-as.missfresh.cn/frontend/img/order-CANCELED.png'
      ],
      orderDetailInfo: {},
      isShowList: true
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/user/orderlist'
      })
    },
    getDetail() {
      this.getId()
      this.$axios
        .get(APIURI + '/order/show/' + this.id)
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            this.orderDetailInfo = res.data
            // DOM更新后
            this.$nextTick(() => {
              this._initScroll()
            })
          }
        })
        .catch(function(err) {
          console.log(err)
        })
    },
    showAllProduct() {
      this.isShowList = !this.isShowList
    },
    goProductDetail(id) {
      this.$router.push({
        path: '/detail?id=' + id
      })
    },
    _initScroll() {
      if (!this.ordersScroll) {
        this.ordersScroll = new BScroll(this.$refs.orderdetail_page, {
          probeType: 3,
          scrollY: true,
          click: true
        })
      } else {
        this.ordersScroll.refresh()
      }
    },
    getId() {
      this.id = this.$route.query.id
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
@import './orderDetail.scss';
</style>